<template>
    <div>
        <div class="shop-cart">
            <div class="content" @click="showList">
                <div class="content-left">
                    <div class="logo-wrapper">
                        <div class="logo" :class="totalPrice >= minPrice ? activeClass : ''">
                            <span class="icon-shopping_cart"></span>
                        </div>
                        <div class="count">{{totalCount}}</div>
                    </div>
                    <div class="price">￥{{totalPrice}}</div>
                    <div class="desc">另需配送费￥{{deliveryPrice}}</div>
                </div>
                <div v-if="totalPrice >= minPrice" class="content-right content-right-1" @click.stop="doThis">
                    <span>去结算</span>
                </div>
                <div v-else class="content-right content-right-2">
                    <span> ￥{{minPrice}}起送</span>
                </div>
            </div>
            <div class="ball-container">
                <transition name="drop" v-for="ball in balls" key="ball" @before-enter="beforeEnter" @enter="enter"
                            @after-enter="afterEnter">
                    <div v-show="ball.show" class="ball">
                        <div class="inner inner-hook"></div>
                    </div>
                </transition>
            </div>
            <transition name="fold">
                <div class="shopcart-list" v-show="this.fold">
                    <div class="list-header">
                        <div class="clearfix" style="width: 92%;">
                            <div class="head">购物车</div>
                            <div class="clear" @click="clearOut">清空</div>
                        </div>
                    </div>
                    <div class="list-content" ref="selectFoodsWrapper">
                        <ul>
                            <li v-for="food in selectFoods" class="food-item">
                                <div class="food clearfix">
                                    <span class="name">{{food.name}}</span>
                                    <span class="price">￥{{food.price*food.count}}</span>
                                </div>
                                <div class="cart-wrapper">
                                    <cartcontrol :food="food"></cartcontrol>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </transition>
        </div>
        <transition name="fade">
            <div class="list-mark" v-show="this.fold" @click="showList"></div>
        </transition>
    </div>
</template>

<script type="text/ecmascript-6">

  import BetterScroll from 'better-scroll';
  import cartcontrol from 'components/cartcontrol/cartcontrol';

  export default{
    props: {
      selectFoods: {
        type: Array,
        default: function () {
          return [
            {
              price: 40,
              count: 2
            }
          ];
        }
      },
      deliveryPrice: {
        type: Number,
        default: 0
      },
      minPrice: {
        type: Number,
        default: 0
      }
    },
    data: function () {
      return {
        activeClass: 'logo-blue',
        balls: [
          {show: false},
          {show: false}
        ],
        fold: false
      };
    },
    created: function () {
      this.$nextTick(() => {
        this.$root.eventHub.$on('cart-add', (target) => {
          this.drop(target);
        });
      });
    },
    computed: {
      totalPrice: function () {
        let total = 0;
        this.selectFoods.forEach((food) => {
          total += food.price * food.count;
        });
        return total;
      },
      totalCount: function () {
        var count = 0;
        this.selectFoods.forEach((food) => {
          count += food.count;
        });
        return count;
      }
    },
    methods: {
      showList: function () {
        if (this.totalPrice <= 0) {
          return;
        }
        this.fold = !this.fold;
        if (this.fold) {
          this.$nextTick(() => {
            if (!this.foodsScroll) {
              this.foodsScroll = new BetterScroll(this.$refs.selectFoodsWrapper, {
                click: true
              });
            } else {
              this.foodsScroll.refresh();
            }
          });
        }
      },
      clearOut: function () {
        this.selectFoods.forEach((food) => {
          food.count = 0;
        });
        this.fold = false;
        return;
      },
      drop: function (target) {
        for (let i = 0; i < this.balls.length; i++) {
          let ball = this.balls[i];
          if (!ball.show) {
            ball.show = true;
            ball.el = target;
            return;
          }
        }
      },
      beforeEnter: function (el) {
        let count = this.balls.length;
        while (count--) {
          let ball = this.balls[count];
          if (ball.show) {
            let rect = ball.el.getBoundingClientRect();
            let x = rect.left - 32;
            let y = -(window.innerHeight - rect.top - 22);
            el.style.display = '';
            el.style.webkitTransform = `translate3D(0,${y}px,0)`;
            el.style.transform = `translate3D(0,${y}px,0)`;
            let inner = el.getElementsByClassName('inner-hook')[0];
            inner.style.webkitTransform = `translate3D(${x}px,0,0)`;
            inner.style.transform = `translate3D(${x}px,0,0)`;
          }
        }
      },
      // 此回调函数是可选项的设置
      // 与 CSS 结合时使用
      enter: function (el, done) {
          /* eslint-disable no-unused-vars */
        let refresh = el.offsetHeight;
        this.$nextTick(() => {
          el.style.display = '';
          el.style.webkitTransform = 'translate3D(0,0,0)';
          el.style.transform = 'translate3D(0,0,0)';
          let inner = el.getElementsByClassName('inner-hook')[0];
          inner.style.webkitTransform = 'translate3D(0,0,0)';
          inner.style.transform = 'translate3D(0,0,0)';
        });
        done();
      },
      afterEnter: function (el) {
        let ball = this.balls[0];
        ball.show = false;
        el.style.display = 'none';
      }
    },
    components: {
      cartcontrol
    }
  };

</script>

<style lang="stylus" rel="stylesheet/stylus">

    @import "../../common/stylus/base.styl";
    @import "../../common/stylus/mixin.styl";

    .shop-cart
        position: fixed
        bottom: 0
        left: 0
        width: 100%
        height: 50px
        background: #141d27
        z-index: 50
        .content
            display: flex
            .content-left
                flex: 1
                color: #80858a
                font-size: 0
                background: #141d27
                .logo-wrapper
                    position: relative
                    display: inline-block
                    vertical-align: top
                    top: -8px
                    margin: 0 12px
                    width: 57px
                    height: 57px
                    padding: 6px
                    box-sizing: border-box
                    border-radius: 50%
                    background: #141d27
                    .logo
                        width: 100%
                        height: 100%
                        border-radius: 50%
                        background: #2b343c
                        .icon-shopping_cart
                            font-size: 24px
                            text-align: center
                            display: block
                            line-height: 45px
                            height: 45px
                    .logo-blue
                        background: #00A0DC
                        .icon-shopping_cart
                            color: #fff
                    .count
                        position: absolute
                        top: 3px;
                        right: 3px;
                        height: 15px
                        border-radius: 6px;
                        padding: 0 6px;
                        background: red
                        color: #fff
                        font-size: 10px
                        line-height: 15px;
                        text-align: center;
                .price, .desc
                    display: inline-block
                    vertical-align: top
                    line-height: 24px
                .price
                    margin-top: 12px
                    font-size: 16px
                    font-weight: 700
                    padding-right: 12px;
                    margin-right: 12px;
                    border-right: 1px solid #80858a;
                .desc
                    margin-top: 13px
                    font-size: 14px
            .content-right
                flex: 0 0 105px
                width: 105px
                font-size: 14px
                font-weight: 700
                text-align: center;
                line-height: 50px;
                &.content-right-1
                    background: #00A0DC
                    color: #fff
                &.content-right-2
                    background: #2b343c
                    color: #80858a
        .ball-container
            .ball
                position: fixed
                left: 32px
                bottom: 22px
                z-index: 200
                transition: all .4s cubic-bezier(0.49, -0.29, 0.75, 0.41)
                .inner
                    width: 16px
                    height: 16px
                    border-radius: 50%
                    background: rgb(0, 160, 220)
                    transition: all .3s linear
        .shopcart-list
            position: absolute;
            bottom: 50px;
            left: 0;
            width: 100%;
            z-index: -1;
            .list-header
                width: 100%
                height: 40px
                line-height: 40px
                padding: 0 18px
                background: #f3f5f7

                .head
                    float: left
                    font-size: 14px
                    color: rgb(7, 17, 27)
                .clear
                    float: right
                    font-size: 12px
                    color: rgb(0, 160, 220)
            .list-content
                overflow: hidden
                padding: 0 18px
                max-height: 200px
                background: #fff
                .food-item
                    display: flex
                    border-bottom-1px(rgba(7, 17, 27, 0.1))
                .food
                    flex: 1
                    height: 36px
                    line-height: 36px
                    font-size: 12px
                    .name
                        float: left
                        color: rgb(7, 17, 27)
                    .price
                        float: right
                        color: rgb(240, 20, 20)
                        font-weight: 700
                .cart-wrapper
                    flex: 0 0 80px
            &.fold-enter-active, &.fold-leave-active
                transition: all 0.5s
                transform: translate3D(0, 0, 0)
                opacity: 1
            &.fold-enter, &.fold-leave-active
                transform: translate3D(0, 100%, 0)
                opacity: 0

    .list-mark
        position: fixed
        top: 0
        left: 0
        z-index: 40
        height: 100%
        width: 100%
        background: rgba(7, 17, 27, 0.6)
        &.fade-enter-active, &.fadeleave-active
            transition: all 0.5s
            background: rgba(7, 17, 27, 0.6)
            opacity: 1
        &.fade-enter, &.fade-leave-active
            background: rgba(7, 17, 27, 0)
            opacity: 0
</style>
